<template>
  <!--计划合伙人组件 -->
  <div v-loading="listLoading" :element-loading-text="prloadingText">
    <h4 class="title-layer-bar flex v-align-c">
      <div class="line"></div>
      <div>一级合伙人设置</div>
    </h4>
    <div class="mar-t-10"></div>
    <div class="mar-t-10">
      <div class="float-l">
        <el-button type="primary" @click="batchAddPartner">批量添加</el-button>
        <el-button @click="batchDeletePlanPartner">移除所有</el-button>
        <span>共{{total}}个一级合伙人</span>
      </div>
      <div class="search-item float-r">
        <label class="font-14"></label>
        <el-select class="select-class" v-model="searchListQuery.keywordType" style="width: 120px">
          <el-option label="合伙人名称" value="1"></el-option>
          <el-option label="联系人" value="2"></el-option>
          <el-option label="手机号" value="3"></el-option>
        </el-select>
        <el-input @keyup.enter.native="handleSearch" v-model.trim="searchListQuery.keyword" placeholder="请输入关键词"
          style="width: 280px;">
        </el-input>
        <el-button-group class="mar-l-20">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetClick">重置</el-button>
        </el-button-group>
      </div>
    </div>
    <div class="mar-t-10 clear-both">
      <el-row>
        <div v-if="total > 0">
          <el-col v-for="pr in partnerRelationData" :key="pr.parnterId" style="padding: 20px; width: 19%;">
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
              <div style="padding: 14px;">
                <div>{{pr.partnerName}}</div>
                <div>联系人：{{pr.realName}}</div>
                <div>手机号：{{pr.phone}}</div>
                <div>
                  <el-button type="danger" icon="el-icon-delete" circle @click="handleDeletePartner(pr)"></el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </div>
        <div v-else class="el-table__empty-block" style="height: 100%;"><span class="el-table__empty-text">暂无数据</span>
        </div>
      </el-row>
      <!-- 列表分页 -->
      <pagination v-show="total>0" :total="total" :page.sync="searchListQuery.currentPage"
        :limit.sync="searchListQuery.size" @pagination="getPlanPartnerList" />
    </div>
    <!-- 选择合伙人组件 -->
    <plan-select-partner :onSureCall="handleSelectPartnerSuccessCall" ref="planSelectPartnerRef"></plan-select-partner>

  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import planSelectPartner from '../plan-select-partner' // base on element-ui
  import {
    getPlanPartnerListById,
    deletePlanPartnerRelation,
    savePlanPartnerRelation,
    deleteByPlanId
  } from '@/api/user/enterprisePlanManagement'

  export default {
    components: {
      planSelectPartner
    },
    directives: {
      elDragDialog
    },
    data() {
      return {
        listLoading: false,
        prloadingText: '加载中',
        total: 0,
        partnerRelationData: [],
        searchListQuery: {
          keywordType: '1',
          keyword: '',
          currentPage: 1,
          size: 10
        },
        planForm: {

        }
      }
    },
    // 初始化页面
    created() {},
    mounted() {
      const that = this
      that.$bus.$on('plan.data', function(data) {
        Object.assign(that.planForm, data)
        // 加载计划合伙人列表
        that.getPlanPartnerList()
      })
    },
    methods: {
      getPlanPartnerList() {
        if (this.planForm.planId) {
          this.listLoading = true
          this.prloadingText = '加载中'
          this.searchListQuery.planId = this.planForm.planId
          this.searchListQuery.enterpriseId = this.getEnterpriseId()
          getPlanPartnerListById(this.searchListQuery).then(response => {
            this.listLoading = false
            if (response.isError) return
            this.total = response.data.total
            this.partnerRelationData = response.data.records
          })
        }
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.getPlanPartnerList()
      },
      resetClick() {
        const originData = this.$options.data()
        this.searchListQuery = originData.searchListQuery
        this.handleSearch()
      },
      handleDeletePartner(item) {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          this.prloadingText = '删除中'
          deletePlanPartnerRelation(item.relationId).then(response => {
            this.listLoading = false
            if (response.isError) return
            this.msgSuccess(response.msg)
            this.getPlanPartnerList()
          })
        }).catch(() => {})
      },
      // 批量添加合伙人
      batchAddPartner() {
        this.$refs.planSelectPartnerRef.open(this.planForm.planId, 1)
      },
      // 删除所有合伙人
      batchDeletePlanPartner() {
        if (this.total > 0) {
          this.$confirm('确定要移除所有吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.listLoading = true
            this.prloadingText = '删除中'
            deleteByPlanId(this.planForm.planId).then(response => {
              this.listLoading = true
              if (response.isError) return
              this.msgSuccess(response.msg)
              this.getPlanPartnerList()
            })
          }).catch(() => {})
        }
      },
      // 选择合伙人成功的回调函数
      handleSelectPartnerSuccessCall(row) {
        if (row && row.length > 0) {
          console.log(row)
          const partnerIds = row.map(item => item.partnerId)
          const data = {
            enterpriseId: this.getEnterpriseId(),
            planId: this.planForm.planId,
            partnerIds: partnerIds
          }
          this.listLoading = true
          this.prloadingText = '保存数据中'
          savePlanPartnerRelation(data).then(response => {
            this.listLoading = false
            if (response.isError) return
            this.msgSuccess(response.msg)
            this.getPlanPartnerList()
          })
        } else {
          this.msgError('请选择合伙人!')
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .pro-p-minheight {
    min-height: 148px;
  }

  .noraml-hide {
    display: none !important;
  }

  .active {
    display: block !important;
  }

  .span-bar {
    padding: 0 50px;
  }

  .remove-btn {
    padding: 7px 6px !important;
  }

  .long-input {
    width: 80%;
  }

  .long-input-2 {
    min-width: 55%;
    // margin-right: 10px;
  }

  .long-input-3 {
    width: 55%;
  }

  .short-input {
    width: 20%;
  }

  .short-input-2 {
    width: 25%;
  }

  .default-input {
    width: 50%;
  }

  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }

  .picture {
    width: 148px;
    height: 148px;
    display: block;
  }

  .pic-bar {
    position: relative;
    display: inline-block;

    .close-icon {
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }

    span {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }
  }

  .pic-add {
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }

  .el-dialog-div {
    height: 70vh;
    overflow: auto;
  }

  .box-card {
    width: 20%;
    padding: 10px;
    float: right;
  }
</style>
